<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 写css都是在style节点里面   css写了多个属性， 内联>外部>#>class>元素选择器。-->
    <style type="text/css">
        .class1 {
            background-color: yellow;
        }

        .class2 {
            font-size: 50px;
        }
    </style>
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    //声明JQuery的初始化入口,常见的方式以$开始，里面传入一个匿名函数即可，所有的初始化写在匿名函数体里面

    //attr用来给一个JQuery对象设置属性,但是这些属性都是dom对象里面的属性
    $(function () {
        $("#attrBtnID").click(function () {
            $("#divId").attr("class", "class2");
        })

        //演示了读写函数val的读写功能
        $("#valBtnID").click(function () {
            //演示了val的读取方法
            alert("用户名是:" + $("#userNameID").val());
            //演示了val的写方法
            $("#userNameID").val("zhanghaojie");
        })

        //通过绑定submit的click事件,可以控制submit按钮的默认提交行为,如果return true 默认提交功能正常,如果为false,默认提交功能取消
        $(":submit").click(function () {


//对于我们的select 可以直接用val赋值或者读取值
            var $city = $("#cityID");
            alert($city.val());
            $city.val("深圳");

//对于多选的的select 可以直接用val赋值或者读取值
            var $city = $("#studentSelectID");
            alert($city.val());
            //对于我们的多选框,如果要赋值为多个值,不能用字符串,要用字符串数组去赋值
            $city.val(["李龙华", "苏林"]);

            //多选的checkbox,通过属性选择器选中,但是如果我们要取得用户选中的值,还要加上:checked属性选择器才行
            var $city = $(":checkbox[name='like']:checked");
            //默认获取的checkbox的多个值返回的是一个数组,不能直接访问,要通过遍历each方法来访问
            $city.each(function () {
               alert("选择的球类 "+this.value);
            })
          var arrs=["台球","足球"];

            //先清空所有复选框
            $(":checkbox[name='like']").each(function () {
                this.checked=false;
            })
            // 变量要赋值的对象,通过选择器让他们选择的元素checked为true(等价于选中)
            $.each(arrs,function (i,item) {
                    alert("i:"+i+" item:"+item);
                    $(":checkbox[name='like']"+"[value='"+item+"']").attr("checked",true);
            })

            //对于我们的多选框,如果要赋值为多个值,不能用字符串,要用字符串数组去赋值
            // $city.val(["篮球", "台球"]);

            //演示了JQuery的验证基本模型,通过val和trim函数来实现
            if ($.trim($("#userNameID").val()) == "") {
                $("#userNameID").after("<span style='color: red'> 用户名不能为空</span>")
                return false;
            }
        })

    })


</script>
<body>
<div id="divId" style="background-color: red;">this is div
    id=divID
</div>
<div id="divId1" class="class1" style="display: none">this is div id=divID1</div>
<form action="index.html" method="post">
    <input type="hidden" name="id" value="44">
    <input type="hidden" name="id1" value="88">
    姓名<input type="text" name="userName" id="userNameID"> <br> 密码<input
        type="password" name="password">
    <br> 爱好:
    篮球 <input type="checkbox" value="篮球" name="like">
    足球 <input type="checkbox" value="足球" name="like">
    台球 <input type="checkbox" value="台球" name="like">
    全选 <input type="checkbox" value="全选" name="checkAll">
    <br>
    籍贯<select id="cityID">
        <option>兰州</option>
        <option>永州</option>
        <option>深圳</option>
    </select>
    <br>
    学生: <select id="studentSelectID" multiple="multiple">
    <option>廖鹏</option>
    <option>张浩杰</option>
    <option>苏林</option>
    <option>李龙华</option>
</select>
    <br>
    性别:  男<input type="radio" name="sex" value="man">   女<input type="radio"  name="sex"  value="woman">
    <br> <input
        type="submit" value="提交">
</form>
<button id="attrBtnID"> attr</button>
<button id="valBtnID"> Val</button>

</body>
</html>